<div class="dispatch-main-container">

  <div class="center-panel">
    <div class="banner">
      <div class="stations">
        <div class="area" *ngFor="let item of pptnrList">
          <div class="name"><span class="shuxian"></span>{{item.stadiaName.substring(0, 8)}}</div>
          <div class="value">{{item.drp}}<label class="dw">mm/h</label></div>
        </div>
      </div>

      <div class="data">
        <div class="data-item">
          <div class="name"><span class="shuxian"></span>总来洪量：-m³/s</div>
          <div class="name"><span class="shuxian"></span>渠道进口流量：-m³/s</div>
        </div>
      </div>

      <div class="buttons">
        <button class="btn-1" nz-button nzType="default" (click)="viewFile(tplContent)">防汛调度预案</button>
        <button class="btn-2" nz-button nzType="default" (click)="goBack()">返回</button>
      </div>

    </div>

    <div class="ght-title">七星渠防汛调度体系</div>
    <div class="canvas-wrap" #canvasDiv>
      <div id="topology-canvas" style="width: 100%; height: 100%;"></div>

      <div class="gate-info" *ngIf="infoShow" [ngStyle]="{
                 'top': hoverItem.top,
                 'left': hoverItem.left
                 }">
        <div class="blue">警戒水位：{{hoverItem.alertLevel}}m</div>
        <div>当前水位：{{hoverItem.waterLevel}}m</div>
        <div class="blue">限定流量：{{hoverItem.limitTraffic}}m³/s</div>
        <div>当前引水流量：{{hoverItem.flow}}m³/s</div>
      </div>
    </div>

  </div>

  <div class="right-panel">
    <app-dm-panel></app-dm-panel>
  </div>

  <ng-template #tplContent let-params let-ref="modalRef">
    <ngx-extended-pdf-viewer [src]="fileSrc" useBrowserLocale="true" height="700px"></ngx-extended-pdf-viewer>
  </ng-template>
</div>
